<script setup lang="jsx">
import { ref, onMounted, reactive, computed, watch } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';
import * as XLSX from 'xlsx';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

// 时间维度选项
const timeDimensionOptions = [
  { label: '年', value: 1 },
  { label: '季度', value: 2 },
  { label: '月', value: 3 },
  { label: '周', value: 4 },
  { label: '日', value: 5 }
];

// 当前选择的时间维度
const selectedTimeDimension = ref(3); // 默认选择月

// 时间选择器的值
const selectedTimeValue = ref(null);

// 季度选项
const quarterOptions = [
  { label: '第一季度', value: 1 },
  { label: '第二季度', value: 2 },
  { label: '第三季度', value: 3 },
  { label: '第四季度', value: 4 }
];

// 周选项（示例）
const weekOptions = computed(() => {
  const weeks = [];
  for (let i = 1; i <= 52; i++) {
    weeks.push({ label: `第${i}周`, value: i });
  }
  return weeks;
});

// 所有原始数据
const allOriginalData = ref([]);

// 问题处理情况图表
const { domRef: problemStatusRef, updateOptions: updateProblemStatusOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: '',
    left: 'right',
    top: 0,
    right: 10
  },
  series: [
    {
      name: '问题处理情况',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: true,
        formatter: '{b|{b}}\n{per|{d}%}',
        rich: {
          b: {
            fontSize: 12,
            lineHeight: 20
          },
          per: {
            color: '#fff',
            backgroundColor: '#1F77B4',
            padding: [2, 4],
            borderRadius: 2,
          }
        }
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 45, name: '已解决' },
        { value: 15, name: '处理中' },
        { value: 8, name: '待处理' },
        { value: 5, name: '已关闭' }
      ]
    }
  ]
}), false);

// 问题类型分布图表
const { domRef: problemTypeRef, updateOptions: updateProblemTypeOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['问题数量'],
    top: 0,
    right: 10
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['质量问题', '设备故障', '工艺问题', '材料问题', '人员问题', '安全问题']
  },
  yAxis: {
    type: 'value',
    name: '问题数量(个)'
  },
  series: [
    {
      name: '问题数量',
      type: 'bar',
      barWidth: '60%',
      data: [20, 15, 12, 10, 8, 5],
      label: {
        show: true,
        position: 'top',
        fontSize: 9
      }
    }
  ]
}), false);

// 表格列定义 - 问题汇总信息
const tableColumns = [
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 8
  },
  {
    key: 'problemTitle',
    dataIndex: 'problemTitle',
    title: '问题标题',
    width: 20
  },
  {
    key: 'problemType',
    dataIndex: 'problemType',
    title: '问题类型',
    width: 12
  },
  {
    key: 'priority',
    dataIndex: 'priority',
    title: '优先级',
    width: 10
  },
  {
    key: 'status',
    dataIndex: 'status',
    title: '状态',
    width: 10
  },
  {
    key: 'responsible',
    dataIndex: 'responsible',
    title: '责任人',
    width: 10
  },
  {
    key: 'reporter',
    dataIndex: 'reporter',
    title: '报告人',
    width: 10
  },
  {
    key: 'reportTime',
    dataIndex: 'reportTime',
    title: '报告时间',
    width: 12
  },
  {
    key: 'completeTime',
    dataIndex: 'completeTime',
    title: '完成时间',
    width: 8
  }
];

// 存储所有数据（包括原始数据和导入的数据）
const allTableData = ref([]);

// 生成写死的表格数据 - 问题汇总数据
const generateTableData = (page, pageSize) => {
  const problemTitles = [
    '原材料质量不达标',
    '生产设备出现故障',
    '工艺流程不合理',
    '员工操作不规范',
    '产品检验标准缺失',
    '安全防护措施不到位'
  ];

  const problemTypes = ['质量问题', '设备故障', '工艺问题', '材料问题', '人员问题', '安全问题'];
  const priorities = ['紧急', '高', '中', '低'];
  const statuses = ['待处理', '处理中', '已解决', '已关闭'];
  const responsibles = ['张三', '李四', '王五', '赵六', '钱七', '孙八'];
  const reporters = ['周九', '吴十', '郑一', '王二', '冯三', '陈四'];

  const data = [];
  const totalItems = 1000; // 总共1000条数据

  // 根据页码和页面大小生成对应的数据
  const startIndex = (page - 1) * pageSize;
  const endIndex = Math.min(startIndex + pageSize, totalItems);

  for (let i = startIndex; i < endIndex; i++) {
    const randomTitle = problemTitles[Math.floor(Math.random() * problemTitles.length)];
    const randomType = problemTypes[Math.floor(Math.random() * problemTypes.length)];
    const randomPriority = priorities[Math.floor(Math.random() * priorities.length)];
    const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
    const randomResponsible = responsibles[Math.floor(Math.random() * responsibles.length)];
    const randomReporter = reporters[Math.floor(Math.random() * reporters.length)];

    // 生成随机日期(最近几年内的数据，便于测试筛选功能)
    const startDate = new Date();
    startDate.setFullYear(startDate.getFullYear() - 2); // 最近2年
    const endDate = new Date();
    const randomTime = startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime());
    const randomReportDate = new Date(randomTime);
    // 统一日期格式为 YYYY/MM/DD
    const reportTime = `${randomReportDate.getFullYear()}/${randomReportDate.getMonth()+1}/${randomReportDate.getDate()}`;

    let completeTime = '';
    if (randomStatus === '已解决' || randomStatus === '已关闭') {
      const completeDate = new Date(randomReportDate.getTime() + Math.random() * (10 * 24 * 60 * 60 * 1000));
      completeTime = `${completeDate.getFullYear()}/${completeDate.getMonth()+1}/${completeDate.getDate()}`;
    }

    data.push({
      key: i,
      index: i + 1,
      problemTitle: randomTitle,
      problemType: randomType,
      priority: randomPriority,
      status: randomStatus,
      responsible: randomResponsible,
      reporter: randomReporter,
      reportTime,
      completeTime
    });
  }
  return data;
};

// 更新当前页数据
const updateCurrentPageData = () => {
  const startIndex = (pagination.current - 1) * pagination.pageSize;
  const endIndex = startIndex + pagination.pageSize;
  tableData.value = allTableData.value.slice(startIndex, endIndex);
};

// 获取行类名
const getRowClass = (index) => {
  return index % 2 === 0 ? 'table-row-even' : 'table-row-odd';
};

// 排序状态
const sortState = reactive({
  field: '',
  order: ''
});

// 处理排序
const handleSort = (field) => {
  // 如果点击的是当前排序字段，则切换排序方式
  if (sortState.field === field) {
    if (sortState.order === 'asc') {
      sortState.order = 'desc';
    } else if (sortState.order === 'desc') {
      sortState.order = '';
      sortState.field = '';
    } else {
      sortState.order = 'asc';
    }
  } else {
    // 点击新字段，默认升序
    sortState.field = field;
    sortState.order = 'asc';
  }
};

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 50,
  total: 1000,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
});

// 表格数据
const tableData = ref([]);

// 初始化数据
onMounted(() => {
  // 生成初始的1000条数据
  allOriginalData.value = [];
  allTableData.value = [];
  for (let i = 0; i < 20; i++) { // 20页 * 50条 = 1000条
    const pageData = generateTableData(i + 1, 50);
    allOriginalData.value.push(...pageData);
    allTableData.value.push(...pageData);
  }
  updateCurrentPageData();

  // 确保图表正确初始化，并更新为原始数据
  setTimeout(() => {
    updateChartData(allOriginalData.value);
  }, 100);
});

// 处理分页变化
const handlePageChange = (current, pageSize) => {
  pagination.current = current;
  pagination.pageSize = pageSize;
  updateCurrentPageData();

  // 重置排序状态
  sortState.field = '';
  sortState.order = '';
};

// 计算排序后的数据
const sortedTableData = computed(() => {
  if (!sortState.field || !sortState.order) {
    return tableData.value;
  }

  // 创建数据副本以避免修改原始数据
  const sortedData = [...tableData.value];

  return sortedData.sort((a, b) => {
    // 特殊处理日期字段排序
    if (sortState.field === 'reportTime' || sortState.field === 'completeTime') {
      // 将日期字符串转换为Date对象进行比较
      const dateA = new Date(a[sortState.field]);
      const dateB = new Date(b[sortState.field]);

      if (dateA < dateB) {
        return sortState.order === 'asc' ? -1 : 1;
      } else if (dateA > dateB) {
        return sortState.order === 'asc' ? 1 : -1;
      }
      return 0;
    }

    let aValue = a[sortState.field];
    let bValue = b[sortState.field];

    // 去除千位分隔符
    if (typeof aValue === 'string') {
      aValue = aValue.replace(/,/g, '');
    }
    if (typeof bValue === 'string') {
      bValue = bValue.replace(/,/g, '');
    }

    // 尝试转换为数字进行比较
    const numA = parseFloat(aValue);
    const numB = parseFloat(bValue);

    if (!isNaN(numA) && !isNaN(numB)) {
      aValue = numA;
      bValue = numB;
    }

    let result = 0;
    if (aValue < bValue) {
      result = -1;
    } else if (aValue > bValue) {
      result = 1;
    }

    return sortState.order === 'asc' ? result : -result;
  });
});

// 文件输入引用
const fileInput = ref(null);

// 导出到Excel
const exportToExcel = () => {
  // 准备导出数据
  const exportData = tableData.value.map(item => {
    const exportItem = {};
    tableColumns.forEach(col => {
      exportItem[col.title] = item[col.dataIndex];
    });
    return exportItem;
  });

  // 创建工作簿
  const ws = XLSX.utils.json_to_sheet(exportData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, '问题记录');

  // 导出文件
  XLSX.writeFile(wb, '问题记录.xlsx');
};

// 导入数据
const importFromExcel = () => {
  fileInput.value.click();
};

// 处理文件上传
const handleFileUpload = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const jsonData = XLSX.utils.sheet_to_json(worksheet);
      console.log('读取的Excel数据:', jsonData);

      if (jsonData.length === 0) {
        message.warning('Excel文件中没有数据');
        return;
      }

      // 将导入的数据转换为表格所需格式
      const importedData = jsonData.map((item, index) => {
        // 获取Excel中的数据，支持多种可能的列名
        const problemTitle = item.problemTitle || item.问题标题 || item['问题标题'] || item['problemTitle'] || '';
        const problemType = item.problemType || item.问题类型 || item['问题类型'] || item['problemType'] || '';
        const priority = item.priority || item.优先级 || item['优先级'] || item['priority'] || '';
        const status = item.status || item.状态 || item['状态'] || item['status'] || '';
        const responsible = item.responsible || item.责任人 || item['责任人'] || item['responsible'] || '';
        const reporter = item.reporter || item.报告人 || item['报告人'] || item['reporter'] || '';
        const reportTime = item.reportTime || item.报告时间 || item['报告时间'] || item['reportTime'] || '';
        const completeTime = item.completeTime || item.完成时间 || item['完成时间'] || item['completeTime'] || '';

        return {
          key: allTableData.value.length + index,
          index: allTableData.value.length + index + 1,
          problemTitle,
          problemType,
          priority,
          status,
          responsible,
          reporter,
          reportTime,
          completeTime
        };
      });

      // 将导入的数据追加到所有数据中
      allTableData.value = [...allTableData.value, ...importedData];
      allOriginalData.value = [...allOriginalData.value, ...importedData];
      pagination.total = allTableData.value.length;

      // 更新当前页显示的数据
      updateCurrentPageData();

      console.log('导入的数据:', importedData);
      console.log('所有数据总数:', pagination.total);
      message.success(`成功导入 ${jsonData.length} 条数据，当前共 ${pagination.total} 条数据`);
    } catch (error) {
      console.error('导入失败:', error);
      message.error('导入失败: ' + error.message);
    } finally {
      // 清空文件输入
      event.target.value = '';
    }
  };
  reader.readAsArrayBuffer(file);
};

// 处理时间维度变化
const handleTimeDimensionChange = (value) => {
  selectedTimeDimension.value = value;
  selectedTimeValue.value = null; // 重置时间选择器的值
  // 这里可以添加根据时间维度筛选数据的逻辑
  message.info(`已切换到${timeDimensionOptions.find(opt => opt.value === value)?.label}维度`);
};

// 监听时间维度和时间值的变化，触发数据更新
watch([selectedTimeDimension, selectedTimeValue], ([newDimension, newValue]) => {
  if (newValue) {
    // 在这里添加根据选择的时间维度和时间值筛选数据的逻辑
    console.log('时间维度:', newDimension, '时间值:', newValue);
    // updateDataBasedOnTimeFilter(newDimension, newValue);
  }
});

// 查询功能 - 根据时间维度和时间值筛选数据
const handleQuery = () => {
  // 检查是否已选择时间维度和时间值
  if (!selectedTimeValue.value) {
    message.warning('请选择时间');
    return;
  }

  // 根据不同的时间维度处理筛选逻辑
  const dimension = selectedTimeDimension.value;
  const timeValue = selectedTimeValue.value;

  let filteredData = [];

  switch (dimension) {
    case 1: // 年
      filteredData = allOriginalData.value.filter(item => {
        const reportDate = new Date(item.reportTime);
        return reportDate.getFullYear() === timeValue;
      });
      break;

    case 2: // 季度
      filteredData = allOriginalData.value.filter(item => {
        const reportDate = new Date(item.reportTime);
        const quarter = Math.floor((reportDate.getMonth() + 3) / 3);
        return quarter === timeValue;
      });
      break;

    case 3: // 月
      filteredData = allOriginalData.value.filter(item => {
        const reportDate = new Date(item.reportTime);
        const selectedMonth = dayjs(timeValue).format('YYYY-MM');
        const itemMonth = dayjs(reportDate).format('YYYY-MM');
        return itemMonth === selectedMonth;
      });
      break;

    case 4: // 周
      // 简化处理，实际项目中可能需要更复杂的周计算逻辑
      filteredData = allOriginalData.value.filter(item => {
        const reportDate = new Date(item.reportTime);
        const weekNumber = getWeekNumber(reportDate);
        return weekNumber === timeValue;
      });
      break;

    case 5: // 日
      filteredData = allOriginalData.value.filter(item => {
        const reportDate = new Date(item.reportTime);
        const selectedDate = dayjs(timeValue).format('YYYY-MM-DD');
        const itemDate = dayjs(reportDate).format('YYYY-MM-DD');
        return itemDate === selectedDate;
      });
      break;

    default:
      filteredData = [...allOriginalData.value];
  }

  // 更新表格数据
  allTableData.value = filteredData;
  pagination.total = filteredData.length;
  pagination.current = 1;
  updateCurrentPageData();

  // 更新图表数据
  updateChartData(filteredData);

  message.success(`筛选完成，共找到 ${filteredData.length} 条记录`);
};

// 计算日期在一年中的周数
const getWeekNumber = (date) => {
  const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
  const pastDaysOfYear = (date - firstDayOfYear) / 86400000;
  return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
};

// 重置筛选条件
const handleReset = () => {
  selectedTimeDimension.value = 3;
  selectedTimeValue.value = null;

  // 恢复所有数据
  allTableData.value = [...allOriginalData.value];
  pagination.total = allOriginalData.value.length;
  pagination.current = 1;
  updateCurrentPageData();

  // 更新图表数据为原始数据
  updateChartData(allOriginalData.value);

  message.success('已重置筛选条件');
};

// 更新图表数据
const updateChartData = (data) => {
  // 更新问题处理情况图表数据
  const statusCount = {
    '已解决': 0,
    '处理中': 0,
    '待处理': 0,
    '已关闭': 0
  };

  // 统计各状态的数量
  data.forEach(item => {
    if (statusCount.hasOwnProperty(item.status)) {
      statusCount[item.status]++;
    }
  });

  // 更新图表
  updateProblemStatusOptions((opts) => {
    const newOpts = { ...opts };
    newOpts.series[0].data = [
      { value: statusCount['已解决'], name: '已解决' },
      { value: statusCount['处理中'], name: '处理中' },
      { value: statusCount['待处理'], name: '待处理' },
      { value: statusCount['已关闭'], name: '已关闭' }
    ];
    return newOpts;
  });

  // 更新问题类型分布图表数据
  const typeCount = {
    '质量问题': 0,
    '设备故障': 0,
    '工艺问题': 0,
    '材料问题': 0,
    '人员问题': 0,
    '安全问题': 0
  };

  // 统计各类型的数量
  data.forEach(item => {
    if (typeCount.hasOwnProperty(item.problemType)) {
      typeCount[item.problemType]++;
    }
  });

  // 更新图表
  updateProblemTypeOptions((opts) => {
    const newOpts = { ...opts };
    newOpts.series[0].data = [
      typeCount['质量问题'],
      typeCount['设备故障'],
      typeCount['工艺问题'],
      typeCount['材料问题'],
      typeCount['人员问题'],
      typeCount['安全问题']
    ];
    return newOpts;
  });
};
</script>

<template>
  <div class="problem-summary-page h-screen flex flex-col">
    <!-- 时间维度筛选 -->
    <div class="filter-section mb-10px">
      <div class="bg-white p-10px rounded-4px shadow-sm">
        <div class="flex items-center flex-wrap gap-20px">
          <div class="flex items-center">
            <span class="mr-10px text-14px font-bold">时间维度:</span>
            <a-select
              v-model:value="selectedTimeDimension"
              @change="handleTimeDimensionChange"
              style="width: 120px"
            >
              <a-select-option
                v-for="option in timeDimensionOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </a-select-option>
            </a-select>
          </div>

          <div class="flex items-center">
            <span class="mr-10px text-14px font-bold">时间选择:</span>
            <!-- 年选择器 -->
            <a-select
              v-if="selectedTimeDimension === 1"
              v-model:value="selectedTimeValue"
              placeholder="请选择年份"
              style="width: 120px"
            >
              <a-select-option
                v-for="year in Array.from({length: 10}, (_, i) => new Date().getFullYear() - 5 + i)"
                :key="year"
                :value="year"
              >
                {{ year }}年
              </a-select-option>
            </a-select>

            <!-- 季度选择器 -->
            <template v-else-if="selectedTimeDimension === 2">
              <a-select
                v-model:value="selectedTimeValue"
                placeholder="请选择季度"
                style="width: 120px"
              >
                <a-select-option
                  v-for="option in quarterOptions"
                  :key="option.value"
                  :value="option.value"
                >
                  {{ option.label }}
                </a-select-option>
              </a-select>
            </template>

            <!-- 月选择器 -->
            <a-date-picker
              v-else-if="selectedTimeDimension === 3"
              v-model:value="selectedTimeValue"
              picker="month"
              placeholder="请选择月份"
              style="width: 120px"
            />

            <!-- 周选择器 -->
            <a-select
              v-else-if="selectedTimeDimension === 4"
              v-model:value="selectedTimeValue"
              placeholder="请选择周"
              style="width: 120px"
            >
              <a-select-option
                v-for="option in weekOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </a-select-option>
            </a-select>

            <!-- 日选择器 -->
            <a-date-picker
              v-else-if="selectedTimeDimension === 5"
              v-model:value="selectedTimeValue"
              placeholder="请选择日期"
              style="width: 120px"
            />
          </div>

          <div class="flex items-center gap-2">
            <a-button type="primary" @click="handleQuery">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 gap-10px md:grid-cols-2 flex-shrink-0" style="height: 35vh;">
      <!-- 问题处理情况 -->
      <div class="chart-card bg-white p-10px rounded-4px shadow-sm h-full flex flex-col">
        <div class="chart-title-wrapper">
          <div class="text-14px font-bold chart-title-text">问题处理情况</div>
        </div>
        <div ref="problemStatusRef" class="flex-grow overflow-hidden"></div>
      </div>

      <!-- 问题类型分布 -->
      <div class="chart-card bg-white p-10px rounded-4px shadow-sm h-full flex flex-col">
        <div class="chart-title-wrapper">
          <div class="text-14px font-bold chart-title-text">问题类型分布</div>
        </div>
        <div ref="problemTypeRef" class="flex-grow overflow-hidden"></div>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="flex-grow overflow-hidden mt-8px">
      <div class="bg-white p-10px rounded-4px shadow-sm h-full flex flex-col">
        <div class="chart-title-wrapper" style="display: flex; justify-content: space-between; align-items: center;">
          <div class="text-14px font-bold chart-title-text">问题记录</div>
          <div style="margin-top: -10px;">
            <AButton type="primary" @click="exportToExcel" class="mr-2">导出Excel</AButton>
            <AButton @click="importFromExcel" class="mr-2">导入Excel</AButton>
          </div>
        </div>
        <div class="flex-grow overflow-hidden flex flex-col min-h-0">
          <!-- 替换 Table 组件为自定义表格 -->
          <div class="custom-table-wrapper flex-grow flex flex-col">
            <div class="table-container">
              <div class="table-header sticky top-0 z-10">
                <div class="table-row table-head">
                  <div
                    class="table-cell sortable"
                    v-for="col in tableColumns"
                    :key="col.key"
                    :style="{ width: col.width + '%' }"
                    @click="handleSort(col.key)"
                  >
                    {{ col.title }}
                    <span class="ml-1">
                      <span
                        class="cursor-pointer hover:text-gray-300"
                        :style="{ color: sortState.field === col.key && sortState.order === 'asc' ? '#fff' : '' }"
                      >↑</span>
                      <span
                        class="cursor-pointer hover:text-gray-300"
                        :style="{ color: sortState.field === col.key && sortState.order === 'desc' ? '#fff' : '' }"
                      >↓</span>
                    </span>
                  </div>
                </div>
              </div>
              <div class="table-body overflow-auto flex-grow">
                <div
                  v-if="sortedTableData.length === 0"
                  class="flex items-center justify-center h-full text-gray-500"
                  style="min-height: 200px;"
                >
                  暂无数据
                </div>
                <div
                  v-else
                  class="table-row"
                  v-for="(row, index) in sortedTableData"
                  :key="row.key"
                  :class="getRowClass(index)"
                >
                  <div class="table-cell" v-for="col in tableColumns" :key="col.key" :style="{ width: col.width + '%' }">
                    <div class="cell-content">{{ row[col.dataIndex] }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="table-pagination">
            <div class="flex items-center">
              <input
                ref="fileInput"
                type="file"
                accept=".xlsx,.xls"
                @change="handleFileUpload"
                style="display: none;"
              />
            </div>
            <a-pagination
              v-model:current="pagination.current"
              v-model:page-size="pagination.pageSize"
              :total="pagination.total"
              :show-size-changer="pagination.showSizeChanger"
              :page-size-options="pagination.pageSizeOptions"
              :show-quick-jumper="pagination.showQuickJumper"
              :show-total="pagination.showTotal"
              @change="handlePageChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.problem-summary-page {
  background-color: #f5f5f5;
  padding: 0 10px;
  overflow: hidden;
}

.filter-section {
  flex-shrink: 0;
}

.chart-card {
  transition: all 0.3s ease;
}

.chart-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 图表标题样式容器 */
.chart-title-wrapper {
  margin: 0 -10px;
  padding: 0 10px 8px;
  position: relative;
}

.chart-title-wrapper::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
}

/* 表格标题样式 */
.bg-white.p-10px.rounded-4px.shadow-sm.h-full.flex.flex-col > .chart-title-wrapper {
  margin: 0 -10px 10px -10px;
}

/* 图表标题文字样式 */
.chart-title-text {
  padding-bottom: 8px;
}

/* 添加自定义表格样式 */
.custom-table-wrapper {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.table-header {
  background-color: #1F77B4 !important;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
  display: flex;
  min-width: 100%;
}

.table-header .table-cell {
  color: white;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.table-body {
  flex-grow: 1;
  overflow-y: auto;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  min-width: 100%;
}

.table-row:last-child {
  border-bottom: none;
}

.table-head {
  font-weight: bold;
}

.table-cell {
  padding: 4px 8px;
  border-right: 1px solid #e8e8e8;
  font-size: 13px;
  white-space: nowrap;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.table-cell:last-child {
  border-right: none;
}

.cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.table-row-even {
  background-color: white;
}

.table-row-odd {
  background-color: #EFF4F9;
}

.table-body .table-row:hover {
  background-color: #e6f7ff !important;
}

.table-pagination {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

:deep(.surely-table-wrapper .surely-table-pagination) {
  margin: 8px 0 !important;
}
:deep(.table-card .ant-card-body) {
  padding-bottom: 10px !important;
}

/* 排序相关样式 */
.sortable {
  cursor: pointer;
  user-select: none;
}

/* 无数据提示样式 */
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  font-size: 14px;
}
</style>
